import React, { Component , useState, useEffect } from 'react'
import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';

const option = {
    series: [
      {
        type: 'graph',
        layout: 'force',
        symbolSize: 50,
        roam: true,
        label: {
          show: true
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        force: {
          repulsion: 2500,
          edgeLength: 100
        },
        data: [
          {name: 'Node 1'},
          {name: 'Node 2'},
          {name: 'Node 3'},
          {name: 'Node 4'},
          {name: 'Node 5'},
        ],
        links: [
          {source: 'Node 1', target: 'Node 2'},
          {source: 'Node 1', target: 'Node 3'},
          {source: 'Node 2', target: 'Node 3'},
          {source: 'Node 2', target: 'Node 4'},
          {source: 'Node 3', target: 'Node 4'},
          {source: 'Node 4', target: 'Node 5'},
        ]
      }
    ]
  };

function MyChart() {
  return <ReactEcharts option={option} />;
}
export default MyChart;